<template>
  <div class="activity">
    <div>.</div>
    <div class="activity-title">
      <img src="../../assets/imgs/invite_icon.png" alt="" srcset="" />
      <van-notice-bar
        left-icon="volume-o"
        :scrollable="false"
        color="#333"
        background="#fbf5ee"
      >
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item v-for="wh in withdraw_record" :key="wh.name">
            <font style="fontsize: 15px"
              >{{ wh.name }} get
              <span>{{ wh.amount | getmoney }} rs </span>bonus</font
            >
          </van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </div>
    <div class="activity-content">
      <div class="content-title">
        <div v-if="red.state === 1">
          <p class="inviUrl">{{ red.invite_url }}</p>
          <button
            v-clipboard:copy="red.invite_desc + red.invite_url"
            v-clipboard:success="copy"
          >
            Copy address to invite friends
          </button>
          <h3>For {{ red.red_withdrew_value | getmoney }} rs</h3>
          <div class="description">You also need to invite 10 friends</div>
        </div>
        <div v-else-if="red.state === 2" class="noCash">
          <p>Completed the invitation task!</p>
          <button @click="withCashHandle">Withdraw cash</button>
          <h3>Get {{ red.red_withdrew_value | getmoney }} rs</h3>
          <div class="description">Already done Invite 10 people</div>
        </div>
        <div v-else class="noCash">
          <p>Completed the invitation task!</p>
          <button class="wtCash">Withdraw cash</button>
          <h3>Get {{ red.red_withdrew_value | getmoney }} rs</h3>
          <div class="description">Already done Invite 10 people</div>
        </div>
        <div class="progress-s">
          <Progress
            :pivotText="red_log_num + '/10'"
            trackHeight="20"
            :percentage="red_log_num * 10"
            textSize="15"
            pivotColor="linear-gradient(90deg, #EC5C2A 0%, #FA8840 100%)"
            trackColor="#FDE2D3"
          />
        </div>
        <div class="invite-user">
          <div v-for="log in red_log" :key="log.id">
            <van-icon name="checked" color="#4A67F5" />
            <span>{{ log.users.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast, Dialog } from "vant";
import Progress from "@/components/progress/index";
export default {
  data() {
    return {
      activityShow: false,
      withdraw_record: [],
      red_log: [],
      red_log_num: 0,
      red: {},
      schedule: {},
    };
  },
  components: {
    Progress,
  },
  mounted() {
    this.$store
      .dispatch("reds", { client: "h5", red_ladder_id: 1 })
      .then((res) => {
        this.withdraw_record = res.withdraw_record;
        this.red_log = res.red_log.slice(0, 10);
        this.red = res.red;
        if (res.red_log.length >= 10) {
          this.red_log_num = 10;
        } else {
          this.red_log_num = res.red_log.length;
        }
      });
  },
  methods: {
    copy(e) {
      this.$toast("Copy succeeded");
    },
    withCashHandle() {
      this.$store
        .dispatch("redsbalance", { red_id: this.red.id })
        .then((res) => {
          if (res == true) {
            this.$toast("Withdrawal success");

            // this.$toast("Successful withdrawal")
          }
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.inviUrl {
  margin: 0 auto;
  width: 350px;
}
.noCash {
  padding: 20px 0 0 0;
}
.wtCash {
  background-color: #a9a9a9 !important;
}
.activity {
  height: 100%;
  min-height: 100vh;
  padding: 0 0 60px 0;
  background: url("../../assets/imgs/invite_bg.png") no-repeat;
  background-size: 100% 100%;
  .activity-title {
    height: 35px;
    width: 346px;
    margin: 288px auto 5px auto;
    background: #fbf5ee;
    border-radius: 15px;
    position: relative;
    text-align: center;
    line-height: 35px;
    font-size: 15px;
    color: #313131;
    span {
      color: #ff4f02;
    }
    /deep/ .van-notice-bar {
      width: 80%;
      height: 35px;
      margin: 0 20px;
    }
    img {
      position: absolute;
      left: 0;
      top: -20px;
      width: 58px;
      height: 56px;
      z-index: 10;
    }
    .notice-swipe {
      margin: 0 0 0 10px;
      width: 250px;
      height: 35px;
      line-height: 35px;
    }
  }
  .noCash2 {
    padding: 20px 0 0 0;
  }
  .activity-content {
    margin: 0 0 60px 0;
    width: 100%;
    height: 465px;
    background: url("../../assets/imgs/invite_card.png") no-repeat;
    background-size: 100% 100%;
    .content-title {
      padding: 20px 0 0 0;
      text-align: center;
      p {
        padding: 0 0 10px 0;
        font-size: 17px;
        color: #313131;
      }
      button {
        border: none;
        width: 280px;
        height: 45px;
        border-radius: 45px;
        background: #4a67f5;
        box-shadow: 0px 2px 15px rgba(78, 105, 236, 0.3);
        font-size: 17px;
        color: #fff;
        text-align: center;
      }
    }
    h3 {
      padding: 34px 0 10px 0;
      font-size: 25px;
      font-weight: 800;
      line-height: 15px;
      color: #ff4f02;
    }
    .description {
      height: 18px;
      font-size: 15px;
      font-weight: 500;
      line-height: 15px;
      color: #888888;
    }
    .progress-s {
      margin: 10px auto;
      width: 280px;
    }
    .invite-user {
      color: #4a67f5;
      font-size: 15px;
      font-weight: 900;
      margin: 0 14px 60px 14px;
      padding: 15px 30px 0 30px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      background-color: #fdfbf8;
      border-radius: 0 0 10px 10px;
      div {
        margin: 0 0 15px 0;
        width: 135px;
        height: 40px;
        border-radius: 40px;
        background-color: #daddf8;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>